<template>
  <div>
<div>汽车信息：一辆{{ car.name }}需要{{ car.price }}万元</div>
<button @click="changePrice">改变汽车价格</button>
<button @click="changeCar">修改整辆车</button>
<div>a：{{ a }}</div>
<button @click="changeA">点击a+1</button>
<br>
<div>食物信息：一份{{ food.name }}需要{{ food.price }}元</div>
<button @click="changeFood">修改整个food</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { reactive, ref } from 'vue';

let car=reactive({name:'奔驰',price:100})
let food=ref({name:'麻辣烫',price:18})
let a=ref(0)

  function changePrice(){
    car.price+=10
  }
  // 修改整辆车reactive
  function changeCar(){
    Object.assign(car,{name:'保时捷',price:200})
  }
   // 修改整个food ref
  function changeFood(){
   food.value = {name:'牛排',price:100}
  }
 function changeA(){
   a.value+=1
 }

</script>
<style>

</style>